import { EChartColumnOption, EChartLineOption, TradeAnalysis } from "@/api/interface";
import { GetTradeAnalysis } from "@/api/modules/reporting";
import { formatDate } from "@/utils/date-formatter";
import { defineComponent, onMounted, reactive, ref } from "vue";
import { Delete, Search } from "@element-plus/icons-vue";
import LiLineChart from "@/components/LiLineChart";
import LiTable from "../../components/LiTable";
import LiColumnChart from "@/components/LiColumnChart";

declare type param = {
  dataTimeRange: string[];
};

export default defineComponent({
  name: "TradeAnalysis",
  setup: function (): () => JSX.Element {
    /* data */
    let param = ref<param>({
      dataTimeRange: [formatDate(-6, "end", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")]
    });

    let dataReport = ref<TradeAnalysis>();
    let EChartOption = reactive<EChartLineOption>({
      xArray: [],
      yArray: [],
      title: "人数"
    });

    let EChartOption2 = reactive<EChartLineOption>({
      xArray: [],
      yArray: [],
      title: "人均金额"
    });

    let EChartOption3 = reactive<EChartLineOption>({
      xArray: [],
      yArray: [],
      title: "单均金额"
    });

    let EChartOption4 = reactive<EChartColumnOption>({
      xArray: [],
      yArray: [],
      title: "开台率（%）"
    });
    let EChartOption5 = reactive<EChartLineOption>({
      xArray: [],
      yArray: [],
      title: "上座率（%）"
    });

    const cd = ref<
      {
        text: string;
        value: any;
      }[]
    >([]);

    /* methods */
    const GetPageData: () => void = async () => {
      dataReport.value = (await GetTradeAnalysis(param.value)).data;
      EChartOption5.xArray =
        EChartOption4.xArray =
        EChartOption3.xArray =
        EChartOption2.xArray =
        EChartOption.xArray =
          dataReport.value?.personTrend.categories as any[];

      EChartOption.yArray = dataReport.value?.personTrend.series[0].data as any[];
      EChartOption2.yArray = dataReport.value?.perAvgComsumeTrend.series[0].data as any[];
      EChartOption3.yArray = dataReport.value?.avgComsumeTrend.series[0].data as any[];
      EChartOption4.yArray = dataReport.value?.ktTrend.series[0].data as any[];
      EChartOption5.yArray = dataReport.value?.szTrend.series[0].data as any[];

      cd.value = [];
      dataReport.value.cd.forEach(l =>
        l.list.forEach(o => {
          cd.value.push(o);
        })
      );
    };
    const search: () => void = async () => {
      await GetPageData();
    };

    async function reset(): Promise<void> {
      param.value.dataTimeRange = [formatDate(-6, "end", "yyyy-MM-dd"), formatDate(0, "end", "yyyy-MM-dd")];
      await GetPageData();
    }

    /* life circle */
    onMounted(async function (): Promise<void> {
      await GetPageData();
    });

    /* html */
    return function (): JSX.Element {
      return (
        <>
          <div class="trade-analysis-container">
            <div style="margin-bottom: 10px" class="card table-box">
              <el-form inline={true} model={param} style="padding-top: 10px;margin-bottom:-10px">
                <el-form-item label="日期：">
                  <el-date-picker
                    v-model={param.value.dataTimeRange}
                    type="daterange"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    clearable={false}
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                  />
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" icon={Search} onClick={search}>
                    搜索
                  </el-button>
                  <el-button icon={Delete} onClick={reset}>
                    重置
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between"
            }}
          >
            {cd.value.map(o => (
              <div
                style={{
                  width: "10%"
                }}
              >
                <div
                  class="card"
                  style={{
                    borderRadius: `4px`,
                    height: "150px",
                    marginBottom: "10px",
                    display: `flex`,
                    flexDirection: `column`,
                    alignItems: `center`,
                    justifyContent: `center`
                  }}
                >
                  <div
                    style={{
                      fontSize: `16px`,
                      color: "#333"
                    }}
                  >
                    {o.text}
                  </div>
                  <div
                    style={{
                      marginTop: `15px`,
                      fontSize: `18px`,
                      color: `#fdc31d`
                    }}
                  >
                    {o.value}
                  </div>
                </div>
              </div>
            ))}
          </div>
          <div class="card mb10">
            <LiLineChart height={480} title={EChartOption.title} xArray={EChartOption.xArray} yArray={EChartOption.yArray} />
          </div>
          <div class="card mb10">
            <LiLineChart height={480} title={EChartOption2.title} xArray={EChartOption2.xArray} yArray={EChartOption2.yArray} />
          </div>
          <div class="card mb10">
            <LiLineChart height={480} title={EChartOption3.title} xArray={EChartOption3.xArray} yArray={EChartOption3.yArray} />
          </div>
          <div class="card mb10">
            <LiColumnChart height={480} title={EChartOption4.title} xArray={EChartOption4.xArray} yArray={EChartOption4.yArray} />
          </div>
          <div class="card mb10">
            <LiLineChart height={480} title={EChartOption5.title} xArray={EChartOption5.xArray} yArray={EChartOption5.yArray} />
          </div>
        </>
      );
    };
  }
});
